<template>
  <div id="temp">
    <!-- 顶部导航 -->
    <p class="common_style">
      <span class="greenStyle">课程管理</span> / 课程分类</p>
  
    <!-- 添加课程 -->
    <div class="add_lessons ar common_style">
      <router-link to="/category/add_category"><button type="button" class="btn btn-success">添加分类</button></router-link>
    </div>
  
    <!-- 课程列表 -->
    <div class="lessons_list common_style">
  
      <!-- 列表 -->
      <table class="table table-hover table-bordered table-striped">
        <tr>
          <th>分类名称</th>
          <th>课程数量</th>
          <th>是否显示</th>
          <th>排序</th>
          <th>操作</th>
        </tr>
        <tbody>
          <tr>
            <td>vue</td>
            <td>12</td>
            <td>否</td>
            <td>10</td>
            <td>
              <router-link to="/category/edit_category"><button type="button" class="btn btn-info btn-xs">编辑</button></router-link>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>
<script>
export default {

}
</script>
<style scoped lang="less">
#temp {
  padding: 15px;
  .common_style {
    background-color: #fff;
    border: 1px solid #dedede;
    border-radius: 5px;
  }
  >p {
    padding-left: 1em;
    line-height: 40px;
  }
  .greenStyle {
    color: #337ab7;
  }
  .add_lessons {
    width: 100%;
    height: 70px;
    margin: 20px 0;
    line-height: 70px;
    padding: 0 20px 0 0;
  }
  .lessons_list {
    border: 0;
    form {
      margin: 20px;
      input {
        width: 150px;
        display: inline-block;
      }
    }
    .table {
      tr,
      td,
      th {
        text-align: center;
        padding: 8px 0;
        border: 1px solid #ddd;
      }
    }
  }
}
</style>